<template>
  <div class="login-page">
    <div class="logo">
      <div class="logo-i"></div>
      <div class="logo-text"></div>
    </div>
    <div class="login-card">
      <div class="h-select">
        <div class="loginTitle">登录</div>
      </div>
      <div class="form-card">
        <form action="" name="form_login" class="layui-form admin-form">
          <div class="input-f">
            <div class="user-i"></div>
            <input
              required
              placeholder="请输入用户名"
              type="text"
              v-model="form.username"
              class="form_input"
              style="width:90%"
            />
          </div>
          <div class="input-f">
            <div class="password-i"></div>
            <input
              required
              placeholder="请输入密码"
              type="password"
              v-model="form.password"
              class="form_input"
              style="width:90%"
            />
          </div>
          <el-button
            class="login-submit"
            :loading="loading"
            style="width:100%;"
            @keyup="handleSubmit"
            @click="handleSubmit"
          >
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
        </form>
      </div>
    </div>
    <div class="version">Copyright @ 2023 奥茵体育 豫ICP备2022011535号-1</div>
  </div>
</template>

<script>
import '@/style/assets/css/common.css'
import '@/style/assets/css/login.css'
import '@/style/assets/css/helper.css'
import '@/style/assets/css/layui.css'
import '@/style/assets/js/flexible.js'
import '@/style/assets/js/jquery-3.5.1.min.js'
import { mapActions } from 'vuex'
import { timeFix } from '@/utils/util'
import { getCodeImg } from '@/api/login'
import { LOGIN_USERNAME, LOGIN_PASSWORD, LOGIN_REMEMBERME } from '@/store/mutation-types'
import storage from 'store'



export default {
  name: "Login",
  data() {
    return {
      codeUrl: '',
      isLoginError: false,
      loginErrorInfo: '',
      form: {
        username: 'admin',
        password: 'admin123',
        code: undefined,
        uuid: '',
        rememberMe: false
      },
      rules: {
        username: [{ required: true, message: '请输入帐户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      logining: false,
      captchaOnOff: true
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  created() {
    this.getStorage()
    this.getCode()
  },
  methods: {
    getCode () {
      getCodeImg().then(res => {
        this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff
        if (this.captchaOnOff) {
          this.codeUrl = 'data:image/gif;base64,' + res.img
          this.form.uuid = res.uuid
        }
      })
    },
    getStorage () {
      const username = storage.get(LOGIN_USERNAME)
      const password = storage.get(LOGIN_PASSWORD)
      const rememberMe = storage.get(LOGIN_REMEMBERME)
      if (username) {
        this.form = {
          username: username,
          password: password,
          rememberMe: rememberMe
        }
      }
    },
    rememberMe (e) {
      this.form.rememberMe = e.target.checked
    },
    ...mapActions(['Login', 'Logout']),
    handleSubmit () {
      this.logining = true
      
      if(this.form.username == null){
        this.$message.error('登录名不能为空');
        this.logining = false
        return ;
      }
      if(this.form.username == null){
        this.$message.error('密码不能为空');
        this.logining = false
        return ;
      }

      if (this.form.rememberMe) {
        storage.set(LOGIN_USERNAME, this.form.username)
        storage.set(LOGIN_PASSWORD, this.form.password)
        storage.set(LOGIN_REMEMBERME, this.form.rememberMe)
      } else {
        storage.remove(LOGIN_USERNAME)
        storage.remove(LOGIN_PASSWORD)
        storage.remove(LOGIN_REMEMBERME)
      }
      this.Login(this.form)
        .then((res) => this.loginSuccess(res))
        .catch(err => this.requestFailed(err))
        .finally(() => {
          this.logining = false
        })
    },
    loginSuccess (res) {
      this.$router.push({ path: '/' })
      // 延迟 1 秒显示欢迎信息
      setTimeout(() => {
        this.$notification.success({
          message: '欢迎',
          description: `${timeFix()}，欢迎回来`
        })
      }, 1000)
      this.handleCloseLoginError()
    },
    requestFailed (err) {
      this.isLoginError = true
      this.loginErrorInfo = err
      this.form.code = undefined
      this.$message.error(err);
      if (this.captchaOnOff) {
        this.getCode()
      }
    },
    handleCloseLoginError () {
      this.isLoginError = false
      this.loginErrorInfo = ''
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-size: cover;
}

.loginTitle {
  font-size: 33px;
  color: white;
  font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-weight: 600;
  position: relative;
  top: 24px;
  text-align: center;
}

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;

  .el-input {
    height: 38px;

    input {
      height: 38px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 33%;
  height: 38px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}

.login-code-img {
  height: 38px;
}
</style>
